<template>
  <div class="product_brand">
    <el-form
      ref="EditForm"
      :model="formModel"
      label-width="90px"
      :rules="validate"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="品牌名称:" prop="name">
            <el-input
              v-model="formModel.name"
              placeholder="品牌名称"
              maxlength="20"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="品牌状态:" prop="status">
            <el-radio-group v-model="formModel.status">
              <el-radio
                v-for="(name, value, index) of getSystemDictionariesByType(
                  'USESTATUS'
                )"
                :key="index"
                :label="value"
                border
              >{{ name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="logo图标:" prop="logo">
            <el-upload
              class="upload-demo"
              drag
              :data="OSSParameter"
              :action="ossAction"
              :show-file-list="true"
              :multiple="false"
              list-type="picture"
              :on-success="onSuccess"
              :file-list="getFileList"
              :before-upload="beforeUpload"
            >
              <i class="el-icon-upload" />
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div slot="tip" class="el-upload__tip">只能上传jpg、png、jpeg文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="品牌排序:" prop="sort">
            <el-input-number
              v-model="formModel.sort"
              style="width: 100%"
              :step="1"
              :max="100"
              :min="0"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="品牌描述:" prop="description">
            <el-input
              v-model="formModel.description"
              type="textarea"
              resize="none"
              rows="5"
              placeholder="描述"
              show-word-limit
              maxlength="255"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getBrandOSSPolicyREQ } from '@/api/third-party/oss'
import { v4 as uuidv4 } from 'uuid'
import { ossAction } from '@/settings'
export default {
  name: 'EditForm',
  components: {},
  props: {
    formModel: {
      type: Object
    },
    validate: {
      type: Object
    }
  },
  data() {
    return {
      ossAction: ossAction,
      fileType: ['IMAGE/JPEG', 'IMAGE/PNG', 'IMAGE/JPG'],
      fileSize: 512000, // 1 * 1024 * 1024 = 1M
      OSSParameter: { }
    }
  },
  computed: {
    ...mapGetters({
      getSystemDictionariesByType: 'dictionaries/getSystemDictionariesByType'
    }),
    getFileList() {
      if (!this.formModel.logo) {
        return []
      }
      return [{ name: this.formModel.name, url: this.formModel.logo }]
    }
  },
  mounted() {},
  methods: {
    onSuccess(response,) {
      this.formModel.logo = this.ossAction + '/' + this.OSSParameter['key']
    },
    beforeUpload(file) {
      if (!file.type) {
        this.$message.error('logo图片上传失败:获取图片格式失败')
        return false
      }
      const fileType = file.type.toLocaleUpperCase()
      if (!this.fileType.includes(fileType)) {
        this.$message.error('logo图片上传失败:只能是 JPG、PNG、JPEG 格式!')
        return false
      }
      if (file.size > this.fileSize) {
        this.$message.error('logo图片上传失败:logo图片大小不能超过 500KB!')
        return false
      }
      return new Promise((resolve, reject) => {
        getBrandOSSPolicyREQ().then(({ accessId, dir, expire, host, policy, signature }) => {
          this.OSSParameter['OSSAccessKeyId'] = accessId
          this.OSSParameter['policy'] = policy
          this.OSSParameter['Signature'] = signature
          this.OSSParameter['key'] = dir + '/' + uuidv4() + '_filename_' + file.name
          this.OSSParameter['host'] = host
          this.OSSParameter['success_action_status'] = 200
          resolve(true)
        }).catch((eror) => {
          console.log(eror)
          reject(false)
        })
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.product_brand {
  /deep/ .upload-demo {
    .el-upload-dragger,.el-upload {
      width: 100%;
    }
  }
}
</style>
